<template>
  <div>
    <div>
      <el-row :gutter="12">

        <el-col :span="8">
          <el-card shadow="always" style="height: 250px">
            <div slot="header" class="clearfix">
              <span style="font-size: 30px;font-family: 华文行楷">晚风</span>
            </div>
            <span style="font-size: 19px;font-family: 华文行楷">
              我很喜欢晚风,但我更加喜欢晚风吹来更多关于你的消息
            </span>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="always" style="height: 250px">
            <div slot="header" class="clearfix">
              <span style="font-size: 30px;font-family: 华文行楷">生活</span>
            </div>
            <span style="font-size: 19px;font-family: 华文行楷">
              四方食事,不过一碗人间烟火
            </span>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="always" style="height: 250px">
            <div slot="header" class="clearfix">
              <span style="font-size: 30px;font-family: 华文行楷">雨</span>
            </div>
            <span style="font-size: 19px;font-family: 华文行楷">
             下雨了,跑与不跑衣服都要湿,还不如慢慢走,结局已定,过程无意
            </span>
          </el-card>
        </el-col>
      </el-row>
    </div>

<div id="main" style="height: 300px;margin-top: 30px"></div>
  </div>
</template>

<script>
  export default {
    name: "page",
    mounted(){
      // 在通过mounted调用即可
      this.echartsInit()
    },
    methods: {
      //初始化echarts
      echartsInit() {
        //柱形图
        //因为初始化echarts 的时候，需要指定的容器 id='main'
        this.$echarts.init(document.getElementById('main')).setOption( {
          title: {
            text: 'Stacked Area Chart'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Email',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: 'Union Ads',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: 'Video Ads',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: 'Direct',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: 'Search Engine',
              type: 'line',
              stack: 'Total',
              label: {
                show: true,
                position: 'top'
              },
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          ]
        })
      }

    }
  }
</script>

<style scoped>
  .image {
    width: 100%;
    display: block;
  }
</style>
